<template>
	<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
		<swiper-item v-for="item in banners" :key="item.sort">
			<image class="swiper-img" :src="item.imgUrl" mode="aspectFit"></image>
		</swiper-item>
		<swiper-item @click="goToPage" v-if="config.isOpenRank">
			<image class="swiper-img" src="../../static/img/ranking.jpg" mode="aspectFit"></image>
		</swiper-item>
	</swiper>
</template>

<script>
	import {
		getBanner
	} from "../../request/home-api.js"
	export default {
		data() {
			return {
				// 轮播图 数据
				banners: []
			}
		},
		created() {
			this.getBannerList()
		},
		methods: {
			goToPage() {
				uni.navigateTo({
					url: '../../pages/ranking/ranking',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			// 获取轮播图
			async getBannerList() {
				try {
					let {
						code,
						data,
						message
					} = await getBanner()
					if (code === 200) {
						this.banners = data
					} else {
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				} catch {
					uni.showToast({
						title: '轮播图加载失败',
						icon: 'error'
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.swiper {
		height: 450rpx;
		margin-bottom: 30rpx;

		.swiper-img {
			width: 100%;
		}

		/deep/ .uni-swiper-dot {
			background-color: #6b6b6b;
		}

		/deep/ .uni-swiper-dot-active {
			background-color: #ffffff;
		}
	}
</style>
